Scaffolding for useFormState #27270

acdlite · 2023-08-22T17:47:55Z

This exposes, but does not yet implement, a new experimental API called useFormState. It's gated behind the enableAsyncActions flag.

useFormState has a similar signature to useReducer, except instead of a reducer it accepts an (async) action function. React will wait until the promise resolves before updating the state:

async function action(prevState, payload) {
  // ..
}
const [state, dispatch] = useFormState(action, initialState)

When used in combination with Server Actions, it will also support progressive enhancement — a form that is submitted before it has hydrated will have its state transferred to the next page. However, like the other action-related hooks, it works with fully client-driven actions, too.

react-sizebot · 2023-08-22T17:53:16Z

Comparing: 856dc5e...ba3e43b

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	165.59 kB	165.59 kB	=	51.88 kB	51.88 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.16%	173.15 kB	173.43 kB	+0.08%	54.20 kB	54.24 kB
facebook-www/ReactDOM-prod.classic.js	+0.02%	569.82 kB	569.92 kB	=	100.37 kB	100.38 kB
facebook-www/ReactDOM-prod.modern.js	+0.02%	553.62 kB	553.72 kB	=	97.53 kB	97.54 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+6.17%	1.43 kB	1.51 kB	+1.54%	0.78 kB	0.79 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+5.25%	1.28 kB	1.34 kB	+0.71%	0.71 kB	0.71 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+5.15%	1.30 kB	1.37 kB	+0.68%	0.73 kB	0.74 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.97%	1.65 kB	1.73 kB	+1.45%	0.90 kB	0.91 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.45%	1.48 kB	1.55 kB	+1.33%	0.83 kB	0.84 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.37%	1.51 kB	1.58 kB	+1.17%	0.85 kB	0.86 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.development.js	+4.25%	6.56 kB	6.84 kB	+1.92%	2.44 kB	2.49 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.development.js	+4.12%	7.10 kB	7.40 kB	+1.95%	2.57 kB	2.62 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.development.js	+3.77%	4.03 kB	4.18 kB	+2.19%	1.37 kB	1.40 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.development.js	+3.75%	4.06 kB	4.21 kB	+2.00%	1.40 kB	1.43 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.development.js	+3.67%	4.47 kB	4.63 kB	+1.75%	1.49 kB	1.52 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.development.js	+3.65%	4.50 kB	4.66 kB	+1.65%	1.52 kB	1.54 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+6.17%	1.43 kB	1.51 kB	+1.54%	0.78 kB	0.79 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+5.25%	1.28 kB	1.34 kB	+0.71%	0.71 kB	0.71 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+5.15%	1.30 kB	1.37 kB	+0.68%	0.73 kB	0.74 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.97%	1.65 kB	1.73 kB	+1.45%	0.90 kB	0.91 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.45%	1.48 kB	1.55 kB	+1.33%	0.83 kB	0.84 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.37%	1.51 kB	1.58 kB	+1.17%	0.85 kB	0.86 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.development.js	+4.25%	6.56 kB	6.84 kB	+1.92%	2.44 kB	2.49 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.development.js	+4.12%	7.10 kB	7.40 kB	+1.95%	2.57 kB	2.62 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.development.js	+3.77%	4.03 kB	4.18 kB	+2.19%	1.37 kB	1.40 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.development.js	+3.75%	4.06 kB	4.21 kB	+2.00%	1.40 kB	1.43 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.development.js	+3.67%	4.47 kB	4.63 kB	+1.75%	1.49 kB	1.52 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.development.js	+3.65%	4.50 kB	4.66 kB	+1.65%	1.52 kB	1.54 kB
oss-experimental/react-server/cjs/react-server.production.min.js	+0.45%	26.15 kB	26.27 kB	+0.26%	8.89 kB	8.91 kB
oss-experimental/react-art/cjs/react-art.development.js	+0.28%	827.87 kB	830.19 kB	+0.10%	180.91 kB	181.09 kB
oss-experimental/react-art/umd/react-art.development.js	+0.26%	943.82 kB	946.25 kB	+0.09%	199.97 kB	200.15 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js	+0.25%	925.81 kB	928.13 kB	+0.09%	198.84 kB	199.02 kB
oss-experimental/react-server/cjs/react-server.development.js	+0.20%	150.42 kB	150.72 kB	+0.15%	37.40 kB	37.46 kB

Generated by 🚫 dangerJS against ba3e43b

This exposes, but does not yet implement, a new experimental API called useFormState. It's gated behind the enableAsyncActions flag. useFormState has a similar signature to useReducer, except instead of a reducer it accepts an (async) action function. React will wait until the promise resolves before updating the state: async function action(prevState, payload) { // .. } const [state, dispatch] = useFormState(action, initialState) When used in combination with Server Actions, it will also support progressive enhancement — a form that is submitted before it has hydrated will have its state transferred to the next page. However, like the other action-related hooks, it works with fully client-driven actions, too.

This exposes, but does not yet implement, a new experimental API called useFormState. It's gated behind the enableAsyncActions flag. useFormState has a similar signature to useReducer, except instead of a reducer it accepts an (async) action function. React will wait until the promise resolves before updating the state: ```js async function action(prevState, payload) { // .. } const [state, dispatch] = useFormState(action, initialState) ``` When used in combination with Server Actions, it will also support progressive enhancement — a form that is submitted before it has hydrated will have its state transferred to the next page. However, like the other action-related hooks, it works with fully client-driven actions, too. DiffTrain build for [b4cdd3e](b4cdd3e)

karlhorky · 2023-08-26T11:36:25Z

Oh cool 👀 is this the new name of useAction / useActionState that Dan mentioned on Twitter a few times?

https://twitter.com/karlhorky/status/1695391901220802860

robertwbradford · 2023-09-29T20:13:17Z

Hello, this is a super-useful feature, thank you. I first came across it in the Next docs and brought up this discussion there.

Still trying to separate what is a Next.js feature and what is a React feature, but I was curious about the order of arguments. In Next, when creating a Server Action and using it in a <form action={myAction}> without also using useFormState, formData is the action's first argument.

However, if that action is then used in form with useFormState, the formData needs to be the second argument. It threw me off until I discovered that—kept getting undefined form data.

I get that useFormState is returning a different action function, but an author of an action function now needs to know what forms the action will be used in and provide two signatures depending on whether useFormState was used.

Again, I don't want to conflate Next.j features with React features, but I was under the assumption that this was all part of the "React Actions" feature.

I couldn't find another discussion on this, but please point me to the right place if there is. Thank you.

This exposes, but does not yet implement, a new experimental API called useFormState. It's gated behind the enableAsyncActions flag. useFormState has a similar signature to useReducer, except instead of a reducer it accepts an (async) action function. React will wait until the promise resolves before updating the state: ```js async function action(prevState, payload) { // .. } const [state, dispatch] = useFormState(action, initialState) ``` When used in combination with Server Actions, it will also support progressive enhancement — a form that is submitted before it has hydrated will have its state transferred to the next page. However, like the other action-related hooks, it works with fully client-driven actions, too.

This exposes, but does not yet implement, a new experimental API called useFormState. It's gated behind the enableAsyncActions flag. useFormState has a similar signature to useReducer, except instead of a reducer it accepts an (async) action function. React will wait until the promise resolves before updating the state: ```js async function action(prevState, payload) { // .. } const [state, dispatch] = useFormState(action, initialState) ``` When used in combination with Server Actions, it will also support progressive enhancement — a form that is submitted before it has hydrated will have its state transferred to the next page. However, like the other action-related hooks, it works with fully client-driven actions, too. DiffTrain build for commit b4cdd3e.

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Aug 22, 2023

acdlite force-pushed the scaffolding-useformstate branch from e618f1b to fd07ad1 Compare August 22, 2023 17:49

acdlite requested a review from sebmarkbage August 22, 2023 18:01

acdlite force-pushed the scaffolding-useformstate branch from fd07ad1 to a114bc3 Compare August 22, 2023 18:01

sebmarkbage approved these changes Aug 22, 2023

View reviewed changes

acdlite force-pushed the scaffolding-useformstate branch from a114bc3 to 1a7c347 Compare August 23, 2023 14:50

acdlite force-pushed the scaffolding-useformstate branch from 1a7c347 to ba3e43b Compare August 23, 2023 14:52

acdlite merged commit b4cdd3e into facebook:main Aug 23, 2023
2 checks passed

acdlite mentioned this pull request Sep 14, 2023

Update React from dd480ef92 to d6dcad6a8. vercel/next.js#55399

Merged

sam3d mentioned this pull request Sep 16, 2023

Restrict useFormState in Server Components vercel/next.js#55417

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scaffolding for useFormState #27270

Scaffolding for useFormState #27270

acdlite commented Aug 22, 2023 •

edited

Loading

react-sizebot commented Aug 22, 2023 •

edited

Loading

karlhorky commented Aug 26, 2023

robertwbradford commented Sep 29, 2023

Scaffolding for useFormState #27270

Scaffolding for useFormState #27270

Conversation

acdlite commented Aug 22, 2023 • edited Loading

react-sizebot commented Aug 22, 2023 • edited Loading

Critical size changes

Significant size changes

karlhorky commented Aug 26, 2023

robertwbradford commented Sep 29, 2023

acdlite commented Aug 22, 2023 •

edited

Loading

react-sizebot commented Aug 22, 2023 •

edited

Loading